<!DOCTYPE html>
<html>
	<head>
		<title>mapDemo</title>
		<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<link rel="stylesheet" href="assistant/css/extra.css" />
		<script src="libs/jquery-3.1.0.min.js"></script>
		<script src="libs/bootstrap-3.3.7.min.js"></script>
		<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
		<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
		<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
		<script src="assistant/style/commonStyle.js"></script>
		<script src="assistant/js/eventHandle.js"></script>
		<script src="assistant/js/vectorHandle.js"></script>
		<script src="assistant/js/dataHandle.js"></script>
		<script src="assistant/conf/conf.js"></script>
		<script src="assistant/state/state.js"></script>
		<script src="assistant/js/interaction/interactionHandle.js"></script>
		<script src="assistant/js/interaction/point.js"></script>
		<script src="assistant/js/interaction/polygon.js"></script>
		<script src="assistant/js/interaction/lineString.js"></script>
		<script src="assistant/js/interaction/circle.js"></script>
		<script src="assistant/js/interaction/measure.js"></script>
		<script src="assistant/js/interaction/lengthMeasure.js"></script>
		<script src="assistant/js/interaction/areaMeasure.js"></script>
		<script src="assistant/js/interaction/drawPrimary.js"></script>
	</head>
	<body>
		<div id="map" class="map">
			<div id="popup1"></div>
		</div>
		<div id="left-panel" class='left-panel'>
			<div class="panel-group table-responsive" role="tablist">
				<div class="panel panel-default leftMenu">
					<!-- 利用data-target指定要折叠的分组列表 -->
					<div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1"
					 role="tab">
						<h4 class="panel-title">
							搜索
							<span class="glyphicon glyphicon-chevron-up right"></span>
						</h4>
					</div>
					<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
					<div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
						<ul class="list-group" id="menuUi">
						</ul>
					</div>
				</div>
				<!--panel end-->
			</div>
		</div>
		<form class="form-inline geometryType">
			<label>Geometry type &nbsp;</label>
			<select id="geometryType">
				<option value="Point">Point</option>
				<option value="LineString">LineString</option>
				<option value="Polygon">Polygon</option>
				<option value="Circle">Circle</option>
				<option value="Length">Length (LineString)</option>
				<option value="Area">Area (Polygon)</option>
				<option value="None" selected="selected">None</option>
			</select>
		</form>
		<form id="checkPanel">
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="mapCheck"data-type="layer" checked="checked">
				<label class="custom-control-label" for="mapCheck">MAP</label>
			</div>			
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="pointCheck" data-type="Point" checked="checked">
				<label class="custom-control-label" for="pointCheck">Point</label>
			</div>
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="linestringCheck" data-type="LineString" checked="checked">
				<label class="custom-control-label" for="linestringCheck">LineString</label>
			</div>
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="polygonCheck" data-type="Polygon" checked="checked">
				<label class="custom-control-label" for="polygonCheck">Polygon</label>
			</div>	
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="circleCheck" data-type="Circle" checked="checked">
				<label class="custom-control-label" for="circleCheck">Circle</label>
			</div>
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="lengthCheck" data-type="Length" checked="checked">
				<label class="custom-control-label" for="lengthCheck">Length (LineString)</label>
			</div>
			<div class="custom-control custom-checkbox">
				<input type="checkbox" class="custom-control-input" id="areaCheck" data-type="Area" checked="checked">
				<label class="custom-control-label" for="areaCheck">Area (Polygon)</label>
			</div>								
		</form>
		
		<script>
			// 初始化地图
			var map = new ol.Map({
				target: 'map',
				view: new ol.View({
					projection: 'EPSG:4326',
					center: [104.06449127, 30.65433469],
					zoom: 11,
					maxZoom: 20
				})
			});
			//cacheVector 保存所有矢量图层实例	
			var cacheVector;
			// redraw是否重绘popover
			State.redraw = true;
			// 缓存所以 feature [{idNum:int,type:string,fObj:feature}] 
			// idNum记录id,type记录图形类型(由于是多个vector渲染，可根据这个获取相应vector obj)
			State.drawFeatureAll = [];
			// 实例化 事件操作
			var eventHandle = new EventHandle(map);
			// 创建 mask 
			var popup = eventHandle.createMask();
			// 矢量图层操作实例
			var VectorHandle = new VectorHandle({
				map: map,
				eventHandle: eventHandle,
				popup: popup
			});

			// 数据操作
			var DataHandle = new DataHandle(map, VectorHandle, cacheVector, eventHandle, popup);
			DataHandle.createList();

			// 瓦片图层
			var raster = new ol.layer.Tile({
				//source:new ol.source.OSM()
				source: new ol.source.XYZ({
					url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!\
					3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
				})				
			});

			map.addLayer(raster);

			$(function() {
				$(".panel-heading").click(function(e) {
					/*切换折叠指示图标*/
					$(this).find("span").toggleClass("glyphicon-chevron-down");
					$(this).find("span").toggleClass("glyphicon-chevron-up");
				});
			});

			// 为 popover 的修改span 绑定事件
			$('body').on('click', 'div.popover span.modifyAddr', (e) => {
				$(e.currentTarget).siblings('button.confirmBtn')[0].disabled = false;
			});

		</script>
	</body>
</html>
